<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		
		<!--轮播组件是mui提供的一个核心组件，在该核心组件上，衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件，这些组件有较多共同点。-->
		<div class="mui-slider">
			<div class="mui-slider-group mui-slider-loop">
				<!--支持循环，需要重复图片节点，并增加.mui-slider-item-duplicate-->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<img src="img/fuji.png"/>
				</div>
				
				<!--内容区容器-->
				<div class="mui-slider-item">
					<!--具体内容-->
					<img src="img/Spinning-bicycle.jpg"/>
				</div>
				
				<div class="mui-slider-item">
					<img src="img/manbu.jpg"/>
				</div>
				
				<div class="mui-slider-item">
					<img src="img/fuji.png"/>
				</div>
				<!--支持循环，需要重复图片节点，并增加.mui-slider-item-duplicate-->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<!--具体内容-->
					<img src="img/Spinning-bicycle.jpg"/>
				</div>
				
				<!--若要支持循环，则需要在.mui-slider-group上添加.mui-slider-loop类，同时需要重复添加2张图片，图片顺序变为：3, 1, 2, 3, 1-->
			</div>
			
			<!--显示圆点-->
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
			
		</div>
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			
			//对于 HTML5+应用的页面有一个很重要的 “plusready”事件，此事件会在页面加载后自动触发，表示所有 HTML5+ API 可以使用， 在此事件触发之前不能调用 HTML5+ API。事件要等 DOM 和 HTML5+ 加载完成之后触发  
			mui.plusReady(function(){
				//获得slider插件对象
				var gallery = mui('.mui-slider');
				gallery.slider({
					interval: 2000	//自动轮播周期，若为0不自动播放，默认为0
				});
				
				//未解决 		http://www.hcoder.net/tutorials/info_88.html
//				document.querySelectorAll(".mui-indicator").onclick = function(index){
					//gallery.slider().gotoItem(index);    //跳转到第index张，index从0算起
//				}
				
				//轮播事件： 当拖动切换显示内容时，会触发slide事件，通过该事件的detail.slideNumber参数可以获得当前显示项的索引（从0开始计算），利用该事件，可在显示内容切换时，动态处理一些业务逻辑。
				//如下为一个可拖动式选项卡示例，为提高页面加载速度，页面加载时，仅显示第一个选项卡的内容，第二、第三选项卡内容为空。当切换到第二、第三个选项卡时，再动态获取相应内容进行显示：
				var item2Show = false, item3Show = false;	//子选项卡是否显示标志
				document.querySelector('.mui-slider').addEventListener('slide', function(event)){
					if(event.detail.slideNumber === 1 && !item2Show){
						//切换到第二个选项卡
						//根据具体业务，动态获得第二个选项卡内容
						var content = ...
						document.getElementById("item2").innerHTML = content;
					    //改变标志位，下次直接显示
					    item2Show = true;
					} else if (event.detail.slideNumber === 2&&!item3Show) {
					    //切换到第三个选项卡
					    //根据具体业务，动态获得第三个选项卡内容；
					    var content = ....
					    //显示内容
					    document.getElementById("item3").innerHTML = content;
					    //改变标志位，下次直接显示
					    item3Show = true;
					}
				}
			});
		</script>
	</body>

</html>